<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>更新-用户</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/x-admin/css/font.css">
    <link rel="stylesheet" href="/x-admin/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="/x-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/x-admin/js/xadmin.js"></script>

    <script type="text/javascript" src="/x-admin/js/vue.js"></script>
    <script type="text/javascript" src="/x-admin/js/axios.js"></script>
    <script type="text/javascript" src="/x-admin/js/common.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.2.2/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui@2.2.2/lib/index.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="/page/welcome">起始页</a>
            <a href="/userInfo/page/list"><cite>用户列表</cite></a>
        </span>

    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:window.location.reload();" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<div class="x-body">
    <el-form label-width="150px">
        <el-form-item label="ID">
            <el-input placeholder="ID" clearable v-model="dataModel.id"
                      :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="名字">
            <el-input placeholder="名字" clearable v-model="dataModel.name"
                      :disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-input placeholder="性别" clearable v-model="dataModel.sex"
                      :disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="头像">
            <el-upload
                    with-credentials="true"
                    class="upload-demo"
                    drag
                    action="/upload/uploadFiles"
                    :on-success="handleUploadSuccess">
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
        </el-form-item>
        <el-form-item label="手机号">
            <el-input placeholder="手机号" clearable v-model="dataModel.phone"
                      :disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input placeholder="邮箱" clearable v-model="dataModel.email"
                      :disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="国家">
            <el-input placeholder="国家" clearable v-model="dataModel.country"
                      :disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="省份">
            <el-input placeholder="省份" clearable v-model="dataModel.province"
                      :disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="城市">
            <el-input placeholder="城市" clearable v-model="dataModel.city"
                      :disabled="false"></el-input>
        </el-form-item>
        <el-form-item label="生日">
            <el-date-picker
                    v-model="dataModel.birth"
                    type="datetime"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择日期时间">
            </el-date-picker>
        </el-form-item>

        <el-form-item label="用户权限">
            <el-tree
                    :data="roles"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    ref="tree"
                    :default-checked-keys="userRoles"
                    highlight-current
                    :props="defaultProps">
            </el-tree>
        </el-form-item>

        <el-form-item label="排序">
            <el-input-number v-model="dataModel.od" :min="1" :max="10"
                             label="排序"></el-input-number>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="updateData(dataModel)">立即更新</el-button>
            <el-button @click="back">取消</el-button>
        </el-form-item>

    </el-form>
</div>
<script>
    //axios http库
    var instance = axios.create({
        baseURL: "",
        timeout: 5000
    });

    //axios response interceptor
    instance.interceptors.response.use(function (res) {
        console.log(res)
        if (res && res.data && res.data.code === 200 || res.data.code === 0)
            return res;
        else {
            layer.msg(res.data.msg)
            return Promise.reject(res.data);
        }
        return res;
    }, function (error) {
        console.error("网络处理异常", error)
        return Promise.reject(error);
    })

    //set vue use axios
    Vue.prototype.$http = instance;

    //当前页面的处理模式
    var add = true


    $(function () {
        var vue = new Vue({
            el: '.x-body',
            data: {
                dataModel: {},
                roles: [],
                userRoles: [],
                defaultProps: {
                    children: 'children',
                    label: 'roleName'
                }
            },
            methods: {
                getData: function () {
                    var thiz = this;
                    this.$http.get("/userInfo/" + getParam("id")).then(function (data) {
                        thiz.dataModel = data.data.data;
                    })
                },
                addData: function (data) {
                    var thiz = this;
                    this.$http.post("/userInfo", data).then(function (data) {
                        alert("增加成功！")
                        thiz.back();
                    })
                },
                updateData: function (data) {
                    var thiz = this;
                    this.$http.put("/userInfo", data).then(function (data) {
                        alert("修改成功！")
                        thiz.$http.post("/systemRole/updateUserRoles?userId=" + getParam("id"), thiz.$refs.tree.getCheckedKeys()).then(function (value) {
                            thiz.back();
                        })
                    })
                },
                uploadFile: function () {
                    var thiz = this;
                    var param = new FormData(); //创建form对象
                    var element = this.$refs.uploadFile.files;
                    param.append('file', element[0]);//通过append向form对象添加数据
                    console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                    var config = {
                        headers: {'Content-Type': 'multipart/form-data'}
                    };  //添加请求头
                    this.$http.post('/upload/uploadFiles', param, config).then(function (response) {
                        thiz.dataModel.img = response.data[0].filepath
                    })
                },
                handleUploadSuccess: function (file) {
                    this.dataModel.img = (file && file[0]) ? fileResourcesDomain + file[0].filepath : "";
                },
                back: function () {
                    history.back();
                },
                changeUrl: function (data) {
                    var result = confirm("确定要更改URL数据吗？")
                    if (result)
                        this.dataModel.url = data;
                },
                getRolesProperties: function () {
                    var thiz = this;
                    this.$http.get("/systemRole?page=1&size=10000").then(function (value) {
                        thiz.roles = value.data.data.list;
                    })
                    this.$http.get("/systemRole/userRoles?userId=" + getParam("id")).then(function (value) {
                        thiz.userRoles = value.data.data;
                    })
                }
            },
            created: function () {
                this.getData();
                this.getRolesProperties();
            }
        });
    });
</script>

</body>

</html>